<template>
  <view class="admin_box">
    <second></second>
    <view class="userInfo_box" v-if="user_info.avatar">
      <view class="RealNameSystem">{{user_info.id_auth_text}}</view>
      <view class="userInfo">
        <image :src="user_info.avatar" />
        <view class="username">
          <text>{{user_info.username}}</text>
          <i class="iconfont icon-bianji"></i>
        </view>
      </view>
      <view class="jifengLevel">
        <view class="jifeng">积分 : {{user_info.pay_points}}</view>
        <view class="level">
          等级 :
          <view>{{user_info.level}}</view>
        </view>
      </view>
      <view class="enter_day_box" :style="{backgroundImage: 'url(' + user_info.rank_set_bg + ')'}">
        <view class="enter_day_top">
          <view class="enter_day">
            共德的
            <view class="enter_day_text">
              {{user_info.enter_day}}
              <text>天</text>
            </view>
          </view>
          <view class="bill" @click="$routerTo({data : month_bill})">
            {{month_bill.name}}
            <i class="iconfont iconjiantou"></i>
          </view>
        </view>
        <view class="count_box">
          <view class="order_count">
            <text>共下单</text>
            <text>
              {{user_info.order_count}}
              <text>笔</text>
            </text>
          </view>
          <view class="consume_count">
            <text>总共消费</text>
            <text>
              {{user_info.consume_count}}
              <text>元</text>
            </text>
          </view>
          <view class="economy_count">
            <text>累计节省</text>
            <text>
              {{user_info.economy_count}}
              <text>元</text>
            </text>
          </view>
        </view>
      </view>
    </view>
    <view class="admin_main">
      <view class="task_wrap">
        <view class="task_top">待完成任务</view>
        <view class="task_list">
          <view
            class="item"
            v-for="(item,index) in task_list"
            :key="index"
            @click="$routerTo({data : item})"
          >
            <text class="left">{{item.name}}</text>
            <view class="right">去完成</view>
          </view>
        </view>
      </view>
      <view class="xitong">
        <view class="about" @click="$routerTo({data : about})">
          <text>{{about.name}}</text>
          <i class="iconfont iconjiantou"></i>
        </view>
        <view class="check_version" @click="$routerTo({data : check_version})">
          <text>{{check_version.name}}</text>
          <i class="iconfont iconjiantou"></i>
        </view>
        <view class="feedback" @click="$routerTo({data : feedback})">
          <text>{{feedback.name}}</text>
          <i class="iconfont iconjiantou"></i>
        </view>
      </view>

      <view class="logOut" @click="hangleClicklogOut">退出登陆</view>
    </view>
  </view>
</template>

<script>
import second from "../../compontents/second/index";
export default {
  components: {
    second
  },
  methods: {
    hangleClicklogOut() {
      wx.showModal({
        //title: "提示",
        content: "是否退出登陆",
        success: res => {
          if (res.confirm) {
            this.$store.commit("setUserInfo", {});
            wx.setStorageSync("userInfo", {});
            wx.showToast({
              title: "退出成功",
            });
            setTimeout(() => {
              uni.switchTab({
                url: "../../pages/index/index"
              });
            }, 1000);
          }
        }
      });
    }
  },
  data() {
    return {
      token: wx.getStorageSync("userInfo").token,
      about: {},
      check_version: {},
      feedback: {},
      month_bill: {},
      task_list: [],
      user_info: {}
    };
  },
  mounted() {
    this.$axios({
      url: "/api/user/getUserSet",
      data: {
        token: this.token
      }
    }).then(res => {
      const { returnData } = res.data;
      this.about = returnData.about;
      this.check_version = returnData.check_version;
      this.feedback = returnData.feedback;
      this.month_bill = returnData.month_bill;
      this.task_list = returnData.task_list;
      this.user_info = returnData.user_info;
    });
  }
};
</script>

<style lang="scss" scoped>
.admin_box {
  background: #f1f1f1;
  .admin_main {
    padding: 30rpx;
    .logOut {
      margin-top: 30rpx;
      width: 100%;
      line-height: 65rpx;
      text-align: center;
      background: #fff;
      border-radius: 10rpx;
    }
    .xitong {
      background: #fff;
      padding: 46rpx;
      margin-top: 30rpx;
      border-radius: 10rpx;
      .check_version,
      .feedback,
      .about {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 52rpx;
      }
      .feedback {
        margin-bottom: 0rpx;
      }
    }
    .task_wrap {
      background: #fff;
      padding-right: 18rpx;
      padding-left: 46rpx;
      border-radius: 10rpx;
      .task_top {
        padding-top: 36rpx;
        padding-bottom: 36rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: rgba(69, 69, 69, 1);
      }

      .task_list {
        height: 100%;
        .item {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 36rpx;
          text.left {
            font-size: 24rpx;
            color: rgba(69, 69, 69, 1);
          }
          .right {
            background: #3271ef;
            color: #fff;
            border-radius: 10rpx;
            font-size: 24rpx;
            width: 108rpx;
            line-height: 44rpx;
            text-align: center;
          }
        }
      }
    }
  }
  .userInfo_box {
    background: url("../../static/zu72.png") no-repeat;
    background-size: 100% 100%;
    height: 687rpx;
    padding: 98rpx 34rpx 34rpx 34rpx;
    position: relative;
    margin-bottom: 80rpx;
    .enter_day_box {
      position: absolute;
      bottom: -80rpx;
      height: 328rpx;
      width: 688rpx;
      background-size: cover;
      border-radius: 10rpx 10rpx 0px 0px;
      color: #7d4127;
      padding-right: 42rpx;
      padding-left: 42rpx;
      .count_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 156rpx;
        .order_count,
        .consume_count,
        .economy_count {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          text:nth-child(2) {
            margin-top: 10rpx;
            font-size: 36rpx;
            text {
              font-size: 24rpx;
              margin-left: 6rpx;
            }
          }
        }
      }
      .enter_day_top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 164rpx;
        border-bottom: 1px solid #ddd;
        .bill {
          color: #fff;
          background: #333;
          border-radius: 25px;
          font-size: 30rpx;
          display: flex;
          align-items: center;
          padding: 12rpx 20rpx 12rpx 20rpx;
          .iconfont {
            font-size: 24rpx;
            margin-left: 4rpx;
          }
        }
        .enter_day {
          font-size: 30rpx;
          .enter_day_text {
            font-size: 60rpx;
            text {
              font-size: 30rpx;
              margin-left: 4rpx;
            }
          }
        }
      }
    }
    .RealNameSystem {
      color: #fff;
      font-size: 24rpx;
      color: rgba(255, 255, 255, 1);
      position: absolute;
      top: 135rpx;
      right: 36rpx;
    }
    .userInfo {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 10rpx;
      margin-bottom: 12rpx;
      image {
        width: 186rpx;
        height: 186rpx;
        border-radius: 50%;
        margin-bottom: 26rpx;
      }

      .username {
        display: flex;
        color: #fff;
        align-items: center;
        margin-bottom: 12rpx;
        text {
          font-size: 36rpx;
          margin-right: 20rpx;
        }
      }
    }

    .jifengLevel {
      display: flex;
      justify-content: space-evenly;
      .jifeng {
        font-size: 22rpx;
        color: rgba(255, 255, 255, 1);
      }

      .level {
        display: flex;
        font-size: 22rpx;
        color: rgba(255, 255, 255, 1);
        margin-left: 20rpx;
        view {
          margin-right: 30rpx;
          width: 62rpx;
          text-align: center;
          line-height: 29rpx;
          background: rgba(254, 115, 60, 1);
          border-radius: 6rpx;
          font-size: 22rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>